15 Glassmorphism UI Design Inspirations and Examples

Home › Blog › Design › 15 Glassmorphism UI Design Inspirations and Examples

Glassmorphism has emerged as a fresh trend in interface design. This design style is characterized by translucent frosted glass like effect, hence the name Glassmorphism, that adds depth and visual hierarchy in your UI and can be effectively utilized to put focus on the content you want to highlight. In this article, we are showcasing some inspiring Glassmorphism UI design examples and concepts in case you are looking to embrace this style in your own designs.

From website landing pages, dashboards, and mobile app interfaces to UI components such as cards, login screens and app onboarding screens, designers have used Glassmorphic effect in creative ways to add visual interest to the interface. While browsing through this showcase, you would notice that Glassmorphic elements work well when layered on top of colorful shapes, vibrant backgrounds and images that show through the translucent glass elements and accentuate the effect.

This post lists UI design concept explorations by designers, you can also take a look at these Glassmorphism Code Snippets for working examples of Glassmorphic UI components. You can click on the button provided with each project to go to their respective pages. You can also follow the designers on Behance or Dribbble if you like their work.

This is an example of Glassmorphism used in visual elements, in this case credit card illustrations, on an online banking website design by Bogusław Podhalicz.

View

Designer Ghani Pradita has used translucent glass effect in this concept store management dashboard design.

View

This is an example UI of a music player app design by Rudi Hartono for Plainthing Studio that combines Glassmorphism with Neumorphism style.

View

Here we have an example of Glassmorphic website header concept with the frosted glass effect used on credit card and email input field with call to action button.

View

This design envisioned by Mikołaj Gałęziowski utilizes glassmorphic UI elements with colorful 3D shapes in sample onboarding screens for a weather app and a personal finance app.

View

These are glassmorphic style UI elements such as Progress bar, Search bar, and Favorite button, courtesy of graphic designer Giuseppe Fasino.

View

Creative Cloud app for macOS Big Sur redesign concept in Glassmorphism style by designer Mikołaj Gałęziowski.

View

UI/UX designer Stefan Brown shows application of Glassmorphism design style in Sign Up and Login Screens of a mobile app.

View

A smart calendar app UI designed by Ghani Pradita for Paperpillar that embraces Glassmorphism using some candy colors.

View

This is a personal workout and fitness app UI concept by visual designer Sachiko Nakayama. Do click on the link below to view the full project on Behance that uses frosted glass elements in different app screens.

View

This fintech website landing page concept by Gakh Yuriy & Vladyslav Sokur uses Glassmorphic icons and illustrations in the design. View full project to explore the style guide, pricing tables, desktop screens and its responsive design.

View

This is an example showcase of the use of Glassmorphism style in a web application for task management, Todoser designed by creative digital agency Phenomenon Studio.

View

Here we have a concept UI for an investment advisor app designed by Ghani Pradita for Paperpillar that combines 3D illustration trend with translucent glassmorphic look.

View

A glassmorphic style smart glass weather app widget concept design by Karlo Bilal.

View

This portfolio website header concept design by Peramita Puja combines 3D character illustration with Glassmorphism in its design.

View

While this post explores Glassmorphism trend in landing pages, web and mobile app UI design, this trend can be extended to other design areas as well such as icon design and presentation design. What do you think of this design trend? Have you incorporated this trend in your own work? Let us know in the comments below.